<template>
	<div class="home_page layer">
		<div class="page_title">Space Alpaca</div>
		<div class="home_page_cont">
			<div class="card_box">
				<div class="card_title">
					{{$t('home.totalAssets')}}
					<img :src="require(`@/assets/images/home/${showBalance ? 'show.png' : 'hide.png'}`)" class="show_icon"
						@click="showBalance = !showBalance" />
				</div>
				<div class="usdt_balance">{{showBalance ? `≈${$utils.getUnit()}${userInfo.total_usdt}` : '****'}}</div>
				<div class="usa_balance">{{showBalance ? `≈${$utils.getUnit()}${userInfo.total_usdt_convert}` : '****'}}</div>
			</div>
			<div class="list_title">
				{{$t('home.assetList')}}
			</div>
			<div class="list_box">
				<div class="item_box" @click="$router.push('/wallet?id=' + item.id)" v-for="(item,index) in currencyList" :key="item.id">
					<div class="item_name">
						<img :src="item.icon_img" />
						{{item.name}}
					</div>
					<div class="money_box">
						<p>{{showBalance ? item.balance : '****'}}</p>
						<p>{{showBalance ? `≈${$utils.getUnit()}${item.convert}` : '****'}}</p>
					</div>
				</div>
				<!-- <div class="item_box" @click="$router.push('/wallet?id=2')">
					<div class="item_name">
						<img src="@/assets/images/home/spal.png" />
						SPAL
					</div>
					<div class="money_box">
						<p>{{showBalance ? userInfo.spal : '****'}}</p>
						<p>{{showBalance ? `≈${$utils.getUnit()}${userInfo.spal_convert}` : '****'}}</p>
					</div>
				</div>
				<div class="item_box" @click="$router.push('/wallet?id=3')">
					<div class="item_name">
						<img src="@/assets/images/home/spal.png" />
						SPAL（Legacy）
					</div>
					<div class="money_box">
						<p>{{showBalance ? userInfo.spal_legacy : '****'}}</p>
						<p>{{showBalance ? `≈${$utils.getUnit()}${userInfo.spal_legacy_convert}` : '****'}}</p>
					</div>
				</div>
				<div class="item_box" @click="$router.push('/wallet?id=4')">
					<div class="item_name">
						<img src="@/assets/images/home/spal.png" />
						SPAL（V2）
					</div>
					<div class="money_box">
						<p>{{showBalance ? userInfo.spal_v2 : '****'}}</p>
						<p>{{showBalance ? `≈${$utils.getUnit()}${userInfo.spal_v2_convert}` : '****'}}</p>
					</div>
				</div> -->
			</div>
		</div>
		<Nav />
	</div>
</template>

<script>
	import Cookie from 'vue-cookies'
	export default {
		name: 'HomePage',
		components: {},
		data() {
			return {
				showBalance: true,
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			currencyList() {
				return this.$store.state.currencyList
			}
		},
		watch: {},
		mounted() {
			const userInfoCookie = Cookie.get('LOGIN_USER_INFO')
			if (userInfoCookie) {
				this.$store.dispatch('getUserInfo')
				this.$store.dispatch('getCurrency')
			}
		},
		methods: {}
	}
</script>
<style lang="less" scoped>
	.home_page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.page_title {
			text-align: center;
			padding: 30px 0;
			font-size: 18px;
		}

		.home_page_cont {
			flex: 1;
			min-height: 1px;
			display: flex;
			flex-direction: column;

			.card_box {
				width: 100%;
				height: 112px;
				background: url('~@/assets/images/home/bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 20px;
				text-align: left;
				color: #1a1a1a;
				margin-bottom: 40px;

				.card_title {
					margin-bottom: 10px;
					font-size: 12px;
					display: flex;
					align-items: center;

					.show_icon {
						width: 14px;
						height: 14px;
						margin-left: 5px;
					}
				}

				.usdt_balance {
					font-size: 20px;
					font-weight: 700;
				}
			}

			.list_title {
				margin-bottom: 30px;
				text-align: left;
				font-size: 14px;
			}

			.list_box {
				flex: 1;
				min-height: 1px;
				overflow-y: auto;
				overflow-x: hidden;
				padding-bottom: 10px;

				.item_box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30px;

					.item_name {
						display: flex;
						align-items: center;
						flex-shrink: 0;
						font-size: 16px;
						color: #fff;

						img {
							width: 38px;
							height: 38px;
							margin-right: 15px;
						}
					}

					.money_box {
						font-size: 14px;
						color: #fff;
						text-align: right;
						margin-left: 5px;
					}
				}
			}
		}
	}
</style>